<!--
  ~ ============LICENSE_START=======================================================
  ~  Copyright (C) 2021 Nordix Foundation
  ~  ================================================================================
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  ~  SPDX-License-Identifier: Apache-2.0
  ~  ============LICENSE_END=========================================================
  -->

<div class="operation-list">

  <div
      class="empty-list-container"
      *ngIf="!(interfaceOperationList$ | async)?.length">
    <span>No operation provided</span>
  </div>

  <div *ngIf="(interfaceOperationList$ | async)?.length">

    <div class="expand-collapse">
      <a
          class="link"
          data-tests-id="expand-all"
          [ngClass]="{'disabled': isAllExpanded()}"
          (click)="toggleAllExpand()">
        {{ 'INTERFACE_EXPAND_ALL' | translate }}
      </a> |
      <a
          class="link"
          data-tests-id="collapse-all"
          [ngClass]="{'disabled': isAllCollapsed()}"
          (click)="toggleAllCollapse()">
        {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
      </a>
    </div>

    <div
        class="interface-row"
        *ngFor="let interfaceType of getKeys(interfaceTypeMap)">

      <div
          class="interface-accordion"
          (click)="toggleCollapse(interfaceType)">
        <span
            class="chevron-container"
            [ngClass]="{'isCollapsed': isInterfaceCollapsed(interfaceType)}">
            <svg-icon
                name="caret1-down-o"
                mode="primary"
                size="small">
            </svg-icon>
        </span>
        <span class="interface-name">{{interfaceType}}</span>
      </div>

      <div class="generic-table" *ngIf="isInterfaceCollapsed(interfaceType)">
        <div class="header-row table-row">
          <span
              class="cell header-cell field-name">
            {{ 'OPERATION_NAME' | translate }}
          </span>
          <span
              class="cell header-cell field-description">
            {{ 'OPERATION_IMPLEMENTATION' | translate }}
          </span>
          <span
              class="cell header-cell field-actions header-actions">
            ●●●
          </span>
        </div>
        <div
            class="data-row"
            *ngFor="let operation of interfaceTypeMap.get(interfaceType)"
            [attr.data-tests-id]="'operation-' + operation.operationType"
            (click)="onEditOperation(operation)">
          <span
              class="cell field-name"
              [attr.data-tests-id]="'operation-' + operation.operationType + '-name'">
              {{operation.operationType}}
          </span>
          <span
              class="cell field-description"
              [attr.data-tests-id]="'operation-' + operation.operationType + '-implementation'">
              {{operation.implementation}}
          </span>
          <span class="cell field-actions">
            <span
                class="delete-action"
                [attr.data-tests-id]="'remove-operation-' + operation.operationType"
                (click)="onRemoveOperation($event, operation)">
              <svg-icon
                  *ngIf="!isReadOnly"
                  name="trash-o"
                  mode="info"
                  size="small"
                  [clickable]="true">
              </svg-icon>
            </span>
          </span>
        </div>

      </div>

    </div>

  </div>

</div>